import {
  Authenticator,
  Button,
  Heading,
  Image,
  Text,
  View,
  useAuthenticator,
  useTheme,
} from '@aws-amplify/ui-react';

import { Example } from '@/components/Example';
import { InlineFilter } from '@/components/InlineFilter';
import { AngularSlotsRenameCallout } from '@/components/MigrationChanges/AngularSlotsRenameCallout';
import {SocialProviderDemo} from '@/components/SocialProviderDemo';

## Headers & Footers

The Authenticator has several "slots" that you can customize to add messaging & functionality to meet your app's needs.

The following example customizes these slots with:

- Custom header above the Authenticator with the Amplify logo
- Custom footer below the Authenticator with _&copy; All Rights Reserved_
- Custom Sign In header with _Sign in to your account_
- Custom Sign In footer with a _Reset Password_ link
- Custom Sign Up header with _Create a new account_
- Custom Sign Up footer with a _Back to Sign In_ link
- Custom Confirm Sign Up header with an _Enter Information_ header
- Custom Confirm Sign Up footer with a _Footer Information_ message

<InlineFilter filters={['angular']}>
_app.component.ts_

```ts{3,12}
import { Component } from '@angular/core';
import { Amplify } from 'aws-amplify';
import { AuthenticatorService } from '@aws-amplify/ui-angular';

// import config from './aws-exports'; // Amplify Gen 1 config
import config from './amplify_outputs.json'

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class UseAuthenticatorComponent {
  constructor(public authenticator: AuthenticatorService) {
    Amplify.configure(config);
  }
}

```

_app.component.html_

```tsx{2,8,14,30,36,52,60,66,70} file=../../../../../../../examples/angular/src/pages/ui/components/authenticator/custom-slots/custom-slots.component.html

```
<AngularSlotsRenameCallout />
</InlineFilter>
<InlineFilter filters={['react']}>
```tsx{1,2,12,24,25,34,47,48,57,69,70,78,86} file=../../../../../../../examples/next/pages/ui/components/authenticator/custom-slots/index.page.tsx#L20-

```
</InlineFilter>
<InlineFilter filters={['vue']}>
```tsx{3,9,15,31,37,53,61,67} file=../../../../../../../examples/vue/src/pages/ui/components/authenticator/custom-slots/index.vue#L16-

```
</InlineFilter>
<InlineFilter filters={['svelte']}>
```html file=../../../../../../../examples/svelte/src/routes/ui/components/authenticator/custom-slots/+page.svelte

```
</InlineFilter>

<Example>
  <SocialProviderDemo components={{
      Header() {
        const { tokens } = useTheme();
        return (
          <View textAlign="center" padding={tokens.space.large}>
            <Image alt="Amplify logo" src="/amplify-logo.svg" />
          </View>
        );
      },
      Footer() {
        const { tokens } = useTheme();
        return (
          <View textAlign="center" padding={tokens.space.large}>
            <Text color={tokens.colors.neutral[80]}>
              &copy; All Rights Reserved
            </Text>
          </View>
        );
      },
      SignIn: {
        Header() {
          const { tokens } = useTheme();
          return (
            <Heading
              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
              level={3}
            >
              Sign in to your account
            </Heading>
          );
        },
        Footer() {
          const { toForgotPassword } = useAuthenticator();
          return (
            <View textAlign="center">
              <Button
                fontWeight="normal"
                onClick={toForgotPassword}
                size="small"
                variation="link"
              >
                Reset Password
              </Button>
            </View>
          );
        },
      },
      SignUp: {
        Header() {
          const { tokens } = useTheme();
          return (
            <Heading
              padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
              level={3}
            >
              Create a new account
            </Heading>
          );
        },
        Footer() {
          const { toSignIn } = useAuthenticator();
          return (
            <View textAlign="center">
              <Button
                fontWeight="normal"
                onClick={toSignIn}
                size="small"
                variation="link"
              >
                Back to Sign In
              </Button>
            </View>
          );
        },
        ConfirmSignUp: {
          Header() {
            const { tokens } = useTheme();
            return (
              <Heading
                padding={`${tokens.space.xl} 0 0 ${tokens.space.xl}`}
                level={3}
              >
                Enter Information:
              </Heading>
            );
          },
          Footer() {
            return <Text>Footer Information</Text>;
          },
        },
      },

  }}/>
</Example>
